<template>
	<view class="complete">
		<view class="fix">
			<top-status></top-status>
			<view class="tabs wap">
				<view class="city" @click="back">
					<uni-icons type="left" size="24" color="#000"></uni-icons>
				</view>
				<view class="tabBox">
					<view class="tab1" :class="{'tab4':tabInd == 0}" @click="tabInd =0" style="margin-right: 40rpx;">用户福利</view>
					<view class="tab2" :class="{'tab4':tabInd == 1}" @click="tabInd =1">我的</view>					
					<!-- <text v-if="coupons.length" :class="{'gold':tabInd == 1}">({{coupons.length}})</text> -->
				</view>
				<view class="city" style="opacity: 0;">
					<uni-icons type="left" size="24" color="#fff"></uni-icons>
				</view>
			</view>
		</view>
		<x-scroll :fixed="true" isNav @onRefresh="onRefresh" @scrolltolower="scrolltolower" :refresh="true" :autoHeight="true">
			<view class="center" v-if="tabInd==0">
				<view class="null" v-if="!shopCoupons.length">暂无用户福利</view>
				<block v-if="shopCoupons.length">
					<view class="coupon-main welfare_main" :class="item.Banner ? '' : 'welfare_bg'" v-for="item in shopCoupons" :key="item.ID">
						<view class="bgbox" v-if="item.Banner" :style="{'background-image': 'url('+item.Banner+')'}"></view>
						<view class="coupon-box welfare_box">
							<view class="user">
								<view class="head">
									<image :src="item.ShopLogo" mode="aspectFill"></image>
								</view>
								<view class="userinfo">
									<view class="username" style="margin-top: 6rpx;">
										{{item.Title || '--'}}
									</view>
									<view class="userlit"  style="margin-top: 0;">
										{{item.ShopName || '--'}}
									</view>
									<view class="userlit">
										有效至：{{DateFun(item.EndTime)}}
									</view>
								</view>
							</view>
							<view class="use_main">
								<view v-if="item.IsMyTake==0" :class="['user_btn',item.IsMyTake==1?'user_bg':'']" @click="getCoupon(item.ID)">
									{{item.IsMyTake==0 ? '立即领取' : item.IsMyTake==1 ? '已领取':''}}
								</view>				
								<view v-if="item.IsMyTake==1" class="user_btn user_bg">
									已领取
								</view>		
								<!-- <view class="userlit" @click="ruleFun(item.Description)">
									使用规则<uni-icons type="right" size="14" color="#c3c3c3"></uni-icons>
								</view> -->
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="center" v-if="tabInd==1">
				<!-- <view class="null" v-if="!coupons.length">暂无优惠券</view> -->
				<block v-if="!coupons.length">
					<u-empty mode="list" width="64" height="64"
						icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
						iconSize="32" text="暂无数据"></u-empty>
				</block>
				<block v-for="(item, index) in coupons" :key="index">
					<view class="coupon-main">
						<view class="coupon-box">
							<view class="price-box" :class="item.Status != 0 ? 'gary' : ''" v-if="item.Discount != 0">
								<view class="price">
									<view class="price-img">¥</view>
									<view class="price-money">
										{{ item.Discount * 10 }}
										<span style="font-size: 24rpx">折</span>
									</view>
								</view>
								<view class="coupon-type" v-if="item.Title">{{ item.Title }}</view>
							</view>
							<view class="price-box" :class="item.Status != 0 ? 'gary' : ''" v-else>
								<view class="price">
									<view class="price-money">免费</view>
								</view>
								<view class="coupon-type" v-if="item.Title">{{ item.Title }}</view>
							</view>
							
							<view class="coupon-info">
								<view class="validity" :class="item.Status != 0 ? 'gary' : ''">
									<view class="full">优惠码：{{ item.CouponNo }}</view>
									<view class="public" style="margin-top: 5rpx">有效期：{{ item.StartDate | sliceMsg }}至{{ item.EndDate | sliceMsg }}</view>
								</view>
								
								<view class="use-info">
									<view class="time" @click="tipsFun(index)">
										使用规则 
										<uni-icons v-if="!item.tips" style="margin-left: 10rpx;" type="bottom" size="14" color="#666"></uni-icons>
										<uni-icons v-else style="margin-left: 10rpx;" type="top" size="14" color="#666"></uni-icons>
									</view>
									<view :class="['use-btn',item.Status!=0?'use-before':'']">
										{{ item.Status == 0 ? '未使用' : item.Status == 1 ? '已使用' : item.Status == -1 ? '已过期' : '' }}
									</view>
								</view>
							</view>
						</view>
						<view class="tips" v-show="item.tips">
							<rich-text :nodes="item.Description || '--'"></rich-text>
							
						</view>
					</view>
					
				</block>
				
			</view>
		</x-scroll>
		
		<uni-popup type="center" ref="rule">
			<view class="rule">
				<view class="title">
					使用规则
				</view>
				<scroll-view scroll-y>
					<rich-text :nodes="ruletext || '--'"></rich-text>
				</scroll-view>
				<view class="rulebtn" @click="ruleClose">
					确定
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
export default {
	components: {
		topStatus
	},
	data() {
		return {
			loading: true,
			state: ['未使用', '已使用', '已过期'],
			state_index: 0,
			receive: ['未使用', '已使用', '已过期'],
			coupons: [],
			shopCoupons:[],
			tabInd:0,
			ruletext:'',
			user:uni.getStorageSync('user')
		};
	},
	onLoad(e) {
		this.tabInd = e.tabInd || 0
		this.MyAllCoupons();
		this.List()
	},
	filters: {
		sliceMsg(val) {
			return val.substring(0, 12);
		},
	},

	methods: {
		DateFun(time) {
			let dateObj = new Date(Date.parse(time));
			// 获取和输出各个部分
			let year = dateObj.getFullYear();
			let month = dateObj.getMonth() + 1; // 月份是从0开始的，所以要加1
			let day = dateObj.getDate();
			let hours = dateObj.getHours();
			let minutes = dateObj.getMinutes();
			let seconds = dateObj.getSeconds();
			let milliseconds = dateObj.getMilliseconds();

			let DateTime = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
			return DateTime;
		},
		ruleFun(content){
			this.ruletext = content
			this.$refs.rule.open()
		},
		ruleClose(){
			this.ruletext = ''
			this.$refs.rule.close()
		},
		async getCoupon(id){
			if (this.user.IsAuth == 0) return this.nav_to('/pages/start/start2');
			let res = await this.$api.post('/Coupon/TakeCoupon',{ID:id})
			if (res.code == 0 && res.data != null) {
				this.$pv.msg('领取成功')
				this.MyAllCoupons()
				this.List()
			} else {
				uni.showToast({
					title: `${res.message}`,
					icon: 'none',
				});
			}
		},
		onRefresh(){
			this.MyAllCoupons();
			this.List()
		},
		scrolltolower(){
			
		},
		// 我的优惠卷
		async MyAllCoupons() {
			// let date = moment().format('YYYY-MM-DD')
			let res = await this.$api.post('/Coupon/MyAllCoupons', { token: uni.getStorageSync('token') || '' });
			this.coupons = res.data;
			if (this.coupons.length) {
				this.coupons.forEach((item) => {
					item.StartDate = this.DateFun(item.StartDate);
					item.EndDate = this.DateFun(item.EndDate);
					item.tips = false
				});
			}
			this.loading = false;
		},
		async List(){
			let res = await this.$api.post('/Coupon/List')
			this.shopCoupons = res.data
		},
		set_index(index) {
			this.state_index = index;
		},
		tipsFun(index){
			this.coupons[index].tips = !this.coupons[index].tips
			this.$forceUpdate()
		},
		back(){
			uni.navigateBack()
		}
		
	},
};
</script>

<style lang="scss">
page{
	background-color: #F6F6F6;
}
.null {
	height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fix {
		position: sticky;
		background-color: #fff;
		width: 750rpx;
		top: 0;
		left: 0;
		z-index: 999;
	}
.tabs {
		box-sizing: border-box;
		z-index: 200;
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;

		.city {
			width: 160rpx;
			display: flex;
		}
		.tabBox{
			display: flex;
			align-items: center;
			.tab1{
				font-size: 32rpx;
				line-height: 44px;
				font-weight: 700;
				color: #666666;
			}
			.tab2 {
				font-size: 32rpx;
				line-height: 44px;
				font-weight: 700;
				color: #666666;
				text{
					color: #666666;
				}
			}
		}
		.gold{
			color: #FDEFBA;
		}
		.tab4 {
			color: #333333 !important;
			position: relative;

			&::before {
				position: absolute;
				left: 50%;
				bottom: 5px;
				display: block;
				content: "";
				width: 60rpx;
				height: 4rpx;
				transform: translate(-50%,-50%);
				background: #333333;
				border-radius: 1px;
			}
		}
	}
.complete {
	$width: 680rpx;

	.tab-bar {
		width: 750rpx;
		height: 82rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.tab {
			display: flex;
			flex-direction: column;
			margin-top: -6px;
			justify-content: center;
			align-items: center;
			position: relative;

			.tab-title {
				width: 84rpx;
				height: 44rpx;
				font-size: 28rpx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: rgba(39, 58, 91, 0.6);
				// line-height: 44rpx;
				// margin-top: 15rpx;
				// opacity: 0.5;
			}

			.active {
				color: rgba(39, 58, 91, 1);
			}

			.line {
				position: absolute;
				width: 116rpx;
				height: 6rpx;
				background: #e3c993;
				border-radius: 2rpx;
				bottom: -25rpx;
			}
		}
	}

	.center {
		.gary {
			view {
				color: #c3c3c3 !important;
			}
		}
		.coupon-main{
			background-color: #fff;
			margin: 34rpx 20rpx;
			padding: 22rpx;
			border-radius: 18rpx;
			overflow: hidden;
			box-sizing: border-box;
		}
		.welfare_bg{
			background-color: #fff !important;
		}
		.welfare_main{
			position: relative;
			padding: 32rpx 22rpx;
			background-color: transparent;
		
			.welfare_box{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.bgbox{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: url('https://i.postimg.cc/kGzDFH1B/head.jpg') no-repeat;
				background-size: cover;
				background-position: center;
				filter: blur(2px);
				z-index: -1;
			}
			.user{
				display: flex;
				align-items: center;
				.head{
					width: 100rpx;
					height: 100rpx;
					overflow: hidden;
					border-radius: 50%;
					border: 2rpx solid #fff;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.userinfo{
					margin-left: 20rpx;
					.username{
						color: #333333;
						font-size: 34rpx;
					}
					.userlit{
						color: #333333;
						margin-top: 20rpx;
						font-size: 24rpx;
					}
				}
			}
			.use_main{
				.user_btn{
					// background-color: #111111;
					background-image: linear-gradient(to bottom,#FEF0BC,#B98B51);
					color: #4C310C;
					padding: 10rpx 20rpx;
					text-align: center;
					border-radius: 8rpx;
					font-size: 26rpx;
					// margin-bottom: 42rpx;
				}
				.user_bg{
					background-image: linear-gradient(to bottom,transparent,transparent);
					font-size: 30rpx;
					font-weight: bold;
					color: #333333;
				}
				.userlit{
					color: #c3c3c3;
					margin-top: 44rpx;
					font-size: 24rpx;
					text-align: right;
				}
			}
		}
		.coupon-box {
			display: flex;
			align-items: center;
			.price-box {
				.price {
					display: flex;
					align-items: center;
					justify-content: center;
					.price-img {
						// width: 16rpx;
						// height: 24rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #e3c993;
						line-height: 24rpx;
						margin-top: 35rpx;
					}

					.pimg {
						color: #273a5b;
					}

					.price-money {
						// width: 96rpx;
						// height: 96rpx;
						font-size: 60rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #e3c993;
						// line-height: 96rpx;
					}

					.prices {
						color: #273a5b;
					}
				}

				.coupon-type {
					margin-top: 20rpx;
					width: 152rpx;
					height: 48rpx;
					background: #343434;
					border-radius: 24rpx;
					font-size: 24rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #e3c993;
					text-align: center;
					line-height: 48rpx;
					white-space:nowrap;
					overflow:hidden;
					text-overflow:ellipsis;
					padding: 0 8rpx;
					box-sizing: border-box;
				}

				.types {
					background: rgba(39, 58, 91, 0.1);
					color: #273a5b;
				}
			}
			.coupon-info{
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 70rpx;
				.validity {
					width: 100%;
					padding-bottom: 20rpx;
					border-bottom: 2rpx dashed #3b3b3b;
					.full {
						font-size: 36rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						margin-bottom: 14rpx;
						line-height: 44rpx;
					}
				
					.public {
						height: 38rpx;
						font-size: 24rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #333333;
						line-height: 38rpx;
					}	
				}
				
				.use-info{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.time {
						color: #333333;
						font-size: 26rpx;
						padding: 10rpx 0;
						display: flex;
						align-items: center;
					}
					.use-btn{
						border-radius: 8rpx;
						padding: 8rpx 16rpx;
						color: #e3c993;
						font-size: 26rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						// background-image: linear-gradient(to bottom,#FEF0BC,#B98B51);
					}
					.use-before{
						// background-image: linear-gradient(to bottom,#454545,#454545);
						color: #fff;
					}
				}
			}
			
		}
		.tips{
			color: #666;
			margin-top: 20rpx;
			font-size: 26rpx;
			margin-left: 220rpx;
		}
	}
}
.rule{
	width: 80vw;
	height: 50vh;
	border-radius: 24rpx;
	padding: 24rpx;
	overflow: hidden;
	background-color: #fff;
	box-sizing: border-box;
	.title{
		font-weight: bold;
		height: 80rpx;
		position: sticky;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		color: #333;
		top: 0;
		left: 0;
	}
	scroll-view{
		width: 100%;
		height: calc(50vh - 48rpx - 80rpx - 80rpx);
		rich-text{
			color: #111111;
			font-size: 28rpx;
		}
	}
	.rulebtn{
		margin-top: 10rpx;
		width: 110rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50rpx;
		background-color: #1C1C1C;
		color: #fff;
		margin: 0 auto;
	}
}
</style>
